<template>
    <div v-if="show" class="bar-wrap">
      <div class="bar-content">
        <div
          :class="['progress-bar-box',options.stripe ? 'progress-bar-stripe' : options.gradient ? 'progress-bar-gradient' : '']"
          :style="{height:options.thickness +'px',borderRadius:`${options.thickness / 2 }px`}"
        >
          <div v-if="options.stripe" :style="getStatusPointCss" class="progress-status-point"></div>
          <div class="progress-bar" :style="styleCss"></div>
        </div>
        <div class="progress-text">
          <img v-if="canSuccess && percent === 100" src="@/assets/icon-success.png" class="icon-prefix" alt="成功">
          <img v-else-if="!canSuccess && percent === 100" src="@/assets/icon-fail.png" class="icon-prefix" alt="失败">
          <span class="progress-tip">{{ progressText }}</span>
          <span v-if="percent !== 100" class="progress-percent">{{ parseInt(percent) }}%</span>
        </div>
      </div>
    </div>
  </template>
  <script>
  export default {
    name: 'ProgressBar',
    props: {
      options: {
        type: Object,
        default() {
          return {
            succColor: '#f12b25',
            failColor: '#f12b25',
            stripe: true, // 开启条纹进度条
            stripeColor: {
              successColor: 'repeating-linear-gradient(-45deg, #ff8b46 25%, #ff6c2a 0, #ff6c2a 50%, #ff6c2a 0, #ff8b46 75%, #ff6c2a 0)',
              failColor: 'repeating-linear-gradient(-45deg, #c8c8c8 25%, #b2b2b2 0, #b2b2b2 50%, #b2b2b2 0, #c8c8c8 75%, #b2b2b2 0)'
            },
            gradient: true, // 开启渐变进度条
            gradientColor: {
              successColor: 'linear-gradient(0deg, #FF6B48 0%, #FF9946 54%, #FFB944 100%)',
              failColor: 'linear-gradient(0deg, #A5A5A5 0%, #C0C0C0 54%, #D8D8D8 100%)'
            },
            transition: {
              widthSpeed: 200,
              opacitySpeed: 400,
              duration: 300 // 定义消失时间 ms
            },
            inverse: true, // 进度条的加载方向 true 从左到右 false 从右至左
            thickness: 18, // 进度条的高度
            autoFinish: false // 设定动画是否可以自动完成，默认是 true
          }
        }
      }
    },
    data() {
      return {
        percent: 0, // 进度条长度
        show: false, // 显示和隐藏
        canSuccess: true, // 是否是成功的状态
        progressText: '加载中...'
      }
    },
    created() {},
    computed: {
      styleCss() {
        // 先拿到乱七八糟的属性
        const { succColor, failColor, stripe, stripeColor, gradient, gradientColor, transition, inverse, thickness } = this.options
        const { widthSpeed, opacitySpeed } = transition
  
        // 定义 css 样式
        const style = {
          opacity: this.show ? 1 : 0
        }
        if (gradient && gradientColor.successColor) {
          // 线性渐变
          style.background = this.canSuccess ? gradientColor.successColor : gradientColor.failColor
        } else if (stripe) {
          // 条纹背景
          style.backgroundImage = this.canSuccess ? stripeColor.successColor : stripeColor.failColor
        } else {
          // 纯色
          style.backgroundColor = this.canSuccess ? succColor : failColor
        }
  
        if (inverse) {
          style.left = 0
        } else {
          style.right = 0
        }
  
        style.width = this.percent + '%' // 设置进度条长度
        style.height = thickness + 'px' // 设置显示高度
        if (stripe) {
          style.height = (thickness - 4) + 'px' // 设置显示高度
        }
        style.borderRadius = `${thickness / 2}px`
        style.transition = `width ${widthSpeed}ms, opacity ${opacitySpeed}ms` // 设置过度样式
  
        return style
      },
      getStatusPointCss() {
        const { inverse, thickness } = this.options
        const style = {
          opacity: parseInt(this.percent) === 100  ? 0 : 1
        }
        if (inverse) {
          style.left = `calc(${this.percent + '%'} - ${thickness + 'px'} )`
        } else {
          style.right = `calc(${this.percent + '%'} - ${thickness + 'px'} )`
        }
  
        return style
      }
    }
  }
  </script>
  
  <style scoped lang="scss">
  .progress-bar {
    opacity: 1;
  }
  .progress-bar-box {
    position: relative;
    width: 400px;
  }
  .progress-bar-gradient {
    background: #f1f1f1;
    box-shadow: inset 0px 1px 2px 0px rgba(135, 135, 135, 0.5);
  }
  .progress-bar-stripe {
    padding: 2px;
    background: #ffeeee;
    box-shadow: inset 0px 1px 2px 0px rgba(255, 174, 174, 0.5);
  }
  .progress-bar-stripe .progress-bar {
    background-size: 20px 20px;
    animation: panoramic 30s linear infinite;
  }
  .bar-content {
    width: 500px;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    left: 50%;
    top: 50%;
    padding: 1.75rem /* 28/16 */ 3rem /* 48/16 */ 0 ;
    margin-left: -250px;
    margin-top: -55px;
    background: #ffffff;
    border-radius: 6px;
    box-sizing: border-box;
  }
  .bar-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99999;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .progress-text {
    display:flex;
    text-align: center;
    align-items:center;
    font-size: 16px;
    color: #505255;
    letter-spacing: 0;
    font-weight: 400;
    text-align: center;
    margin-top: 10px;
  }
  .progress-percent {
    display: inline-block;
    color: #ff6948;
    margin-left: 6px;
  }
  .progress-tip{
    display: inline-block;
  }
  .progress-status-point{
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-image: linear-gradient(0deg, #FF6B48 0%, #FF9946 54%, #FFB944 100%);
    box-shadow: 0px 3px 5px 0px rgba(7, 6, 6, 0.5);
    transition: left 0.1s ease-in-out; /* 指定过渡时间、速度曲线等参数 */
    &::before{
      content:'';
      display:block;
      width: 8px;
      height: 8px;
      position: absolute;
      left: 9px;
      top: 9px;
      margin-left: -4px;
      margin-top: -4px;
      border-radius: 50%;
      background: #ffffff;
      z-index: 222;
    }
  }
  .icon-prefix{
    vertical-align: middle;
    width: 14px;
    margin-right: 4px;
  }
  /*定义动画*/
    @keyframes panoramic{
      to {
        background-position: 200% 0;
      }
    }
  
  </style>
  